<template>
  <el-dialog :close-on-click-modal="false"
             modal-append-to-body
             lock-scroll
             title="下载"
             width="472px"
             :visible.sync="downloadDialog">
    <ul class="clearfix">
      <li v-for="(item, index) in downloadList" :key="index" class="filed-list fl clearfix">
        <icon-svg icon-class="yasuobao" class="fl file-icon" />
        <div class="fl file-detail">
           <div class="file-name">{{item.name}}</div>
            <span class="file-size">{{item.size}}&nbsp;/&nbsp;</span>
            <a :href="item.url+'?name='+item.name" target="_blank" download>下载</a>
        </div>
      </li>
    </ul>
    <div slot="footer">
      <el-button @click="downloadDialog=false" size="mini">取消</el-button>
    </div>
  </el-dialog>
</template>
<script lang="ts">
import { Component, Vue, Emit } from 'vue-property-decorator'
@Component({ name: 'MultiFiledDialog', components: {} })
export default class MultiFiledDialog extends Vue {
  [x: string]: any
  private downloadDialog: boolean = false // 下载录音压缩包的弹窗
  private downloadList: any = [] // 下载列表

  public setDialogData (data: any) { // 由父级调用，传递多文件下载的列表
    this.downloadDialog = true
    this.downloadList = data || []
  }
}
</script>
<style lang="stylus" scoped>
  .filed-list
    width 200px
    height 60px
    background #fff
    border 1px solid $border-main
    box-shadow 0px 2px 8px 0px #edf1f5
    border-radius 10px
    margin-bottom 16px
    padding 0 16px
    .file-icon
      font-size 30px
      margin-top 15px
    .file-detail
      margin 15px 0 0 10px
      font-size 12px
    .file-name
      margin-bottom 6px
      max-width 9em
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
    .file-size
      color $fc-gray3
  .filed-list:nth-child(2n)
    margin-left 24px
</style>
